<template>
  <div>
    <div class="content-wrapper page-menu" @mousewheel="closeMenu">
      <!-- 多数据源下拉框 -->
      <data-source-select @microIds="microIds" @dataSourceSelectChange="dataSourceSelectChange"
        v-show="selectShow"></data-source-select>
      <div class="page-menu-search">
        <el-input class="systemInput" v-model="inputvalue" placeholder="请输入名称" @change="search" @input="change">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
        </el-input>
        <i class="el-icon-plus addicon" @click="add"></i>
      </div>
      <div class="page-menu-div" ref="pageMenu">
        <div class="page-menu-item" v-for="(item, index) in menuitems" :key="index" :class="{
          'page-menu-item-disable': item.state == 0,
          'page-menu-item-active': activeitem == index,
        }" @click="itemclick(item, index)">
          <el-tooltip class="item" effect="dark" :content="item.name" placement="left-start">
            <div class="page-menu-title">{{ item.name }}</div>
          </el-tooltip>

          <div class="page-menu-icon" @click.prevent.stop="showMenu(item, index, $event)">
            <i :class="icon"></i>
            <dropMenu v-if="menuindex == index" :menuitems="dropmenus" @close="closeMenu" @dropitemclick="dropitemclick"
              :scrollTop="scrollTop" :parentitem="item"></dropMenu>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import dropMenu from "./dropMenu.vue";
//引入多数据源公共组件
import DataSourceSelect from './dataSourceSelect.vue';
import { tableList } from '@/system/api/listStructure';
import { queryList } from '@/system/api/menuManage.js'
export default {
  name: "pageMemu",
  props: {
    selectName: { default: null },
    activeitem: { default: -1 },
    menuitems: null,
    icon: { default: "el-icon-more" },
    dropmenus: {
      default() {
        return [
          {
            name: "编辑",
            iconPosition: "before",
            iconname: "editicon",
            value: 1,
          },
          {
            name: "删除",
            iconPosition: "before",
            iconname: "delicon",
            value: 2,
          },
          {
            name: "启用",
            iconPosition: "before",
            iconname: "enableicon ",
            value: 3,
          },
          {
            name: "禁用",
            iconPosition: "before",
            iconname: "disableicon",
            value: 4,
          },
        ];
      },
    },
    selectShow: true
  },
  components: { dropMenu, DataSourceSelect },
  data() {
    return {
      inputvalue: "",
      menuindex: -1,
      scrollTop: 0,
    };
  },
  watch: {
    '$route'(to, from) {
      this.sortArray();
    }
  },
  computed: {
    //		filtermenus: function() {
    //
    //			if (this.inputvalue) {
    //				let tempArr = []
    //				if (this.menuitems) {
    //					this.menuitems.forEach((item, index) => {
    //						if (item.name.indexOf(this.inputvalue) > -1) {
    //							tempArr.push(item)
    //						}
    //					})
    //				}
    //
    //				return tempArr
    //			} else {
    //				return this.menuitems
    //			}
    //		}
  },
  mounted() {
    this.sortArray();
  },
  methods: {
    sortArray() {
      this.menuitems = this.menuitems.sort(function compareFunction(item1, item2) {
        return item1.name.localeCompare(item2.name);
      });
    },
    async dataSourceSelectChange(e) {
      let microIds = {}
      microIds.microId = e
      // this.$$emit('microId',e)
      console.log(microIds);
      if (this.selectName == '表单管理') {
        const list = await queryList(microIds)
        console.log(list);
        this.$emit('menuitemss', list.info)
        this.$emit('microIdss', e)
      } else {
        try {
          const list = await tableList(microIds)
          console.log(list);
          this.$emit('menuitemss', list.info)
          this.$emit('microIdss', e)
          // this.menuitems = list.info
        } catch { }
      }
    },
    add() {
      this.$emit("add");
    },
    itemclick(item, index) {
      //			console.log(this.$refs.pageMenu.scrollTop);
      //			this.$refs.pageMenu.scrollTo(0,1700)
      this.$emit("itemclick", item, index);
    },
    scrollPage() {
      let height = this.$refs.pageMenu.scrollHeight;
      this.$refs.pageMenu.scrollTo(0, height);
    },
    showMenu(item, index, e) {
      //console.log(document.documentElement.scrollLeft);//document.body 要改成 documentElement
      this.$emit("itemIconClick", item, index);
      this.scrollTop = this.$refs.pageMenu.scrollTop;
      if (this.dropmenus.length > 0) {
        this.menuindex = index;
      }
    },
    closeMenu() {
      this.menuindex = -1;
    },
    dropitemclick(parentItem, dropItem, index) {
      this.$emit("dropitemclick", parentItem, dropItem, index);
    },
    search() {
      this.$emit("search", this.inputvalue);
    },
    change() {
      this.$emit("change", this.inputvalue);
    },
    microIds(e) {
      this.$emit('microIdss', e)
    }
  },
  mounted() {
    //console.log(this.activeitem)
  },
};
</script>

<style lang="scss" scoped>
.page-menu {
  height: 100%;
  min-width: 234px;
  width: 234px;
  padding: 20px;
  padding-right: 0px;

  .page-menu-search {
    margin-bottom: 16px;
    margin-right: 25px;
    // TODO 新增
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    ::v-deep.el-input {
      width: 100%;

      input {
        border: 1px solid var(--page-menu-input-border-color);
        /*box-shadow: 0px 10px 20px 0px rgba(203, 203, 203, 0.1),
					-1px -10px 20px 0px rgba(203, 203, 203, 0.1);*/
        border-radius: 6px;
        font-weight: 400;
        line-height: 40px !important;
        height: 40px !important;
        font-size: 16px;
        background: var(--page-menu-input-back-color);
      }

      .el-icon-search {
        &::before {
          font-size: 16px;
          color: var(--page-menu-input-icon-color);
        }
      }

      &.active {
        border: 1px solid red;
      }
    }

    .addicon {
      cursor: pointer;
      display: inline-block;
      line-height: 40px;
      border: 1px solid var(--page-menu-input-border-color);
      /*box-shadow: 0px 10px 20px 0px rgba(203, 203, 203, 0.1),
				-1px -10px 20px 0px rgba(203, 203, 203, 0.1);*/
      border-radius: 6px;
      min-width: 40px;
      height: 40px;
      margin-left: 13px;
      text-align: center;

      &::before {
        color: var(--page-menu-input-icon-color);
        font-size: 24px;
        font-weight: 800;
      }

      &:hover {
        background: var(--input-hover-back-color);
        border: 1px solid var(--input-focus-border-color);
        box-shadow: var(--input-shadow-color);
      }
    }
  }

  .page-menu-div {
    height: calc(100% - 50px);
    width: 100%;
    padding-right: 20px;
    overflow-y: auto;
  }

  .page-menu-item {
    text-align: left;
    display: flex;
    margin-bottom: 16px;
    border-radius: 6px;
    font-weight: 400;
    font-size: 16px;
    padding: 0 16px;
    line-height: 40px;
    background: var(--page-menu-item-back-color);
    color: rgb(158, 154, 154);
    justify-content: space-between;
    cursor: pointer;
  }

  .page-menu-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .page-menu-item-disable {
    background: var(--tag-button-disable-back-color);
  }

  .page-menu-item-active {
    background: var(--page-menu-active-item-back-color);
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>